<template>
  <div style="margin-top: 15px; margin-left: 15px;">
    <!-- 查询列表 -->
    <el-form :model="selectForm" label-width="80px">
      <div style="display: flex; align-items: start;">
        <el-form-item label="ID:" style="width: 30%;">
          <el-input v-model="selectForm.uid" placeholder="请输入ID" clearable />
        </el-form-item>
        <el-form-item label="姓名:" style="width: 30%;">
          <el-input v-model="selectForm.name" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="submitForm()">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="resetForm('selectForm')">重置</el-button>
        </el-form-item>
        <el-button v-if="isOpen" type="text" icon="el-icon-arrow-up" style="margin-left: 20px" @click="change">收起</el-button>
        <el-button v-if="!isOpen" type="text" icon="el-icon-arrow-down" style="margin-left: 20px" @click="change">展开</el-button>
      </div>
      <div style="display: flex;">
        <el-form-item v-if="isOpen" style="width: 20%; margin-right: 5%; " label="入职日期:">
          <el-date-picker v-model="selectForm.entryDate" type="date" placeholder="选择时间" value-format="yyyy-MM-dd" clearable />
        </el-form-item>
        <el-form-item v-if="isOpen" style="width: 20%; margin-right: 5%;" label="性别:">
          <el-select v-model="selectForm.gender" placeholder="请选择性别" clearable style="width: 100%;">
            <el-option v-for="g in genders" :key="g" :label="g" :value="g" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="isOpen" style="width: 20%; margin-right: 5%;" label="所属部门:">
          <el-select v-model="selectForm.department" clearable filterable placeholder="请选择所属部门">
            <el-option v-for="d in departments" :key="d" :label="d" :value="d" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="isOpen" style="width: 20%; margin-right: 5%;" label="职位/岗位:">
          <el-select v-model="selectForm.post" clearable filterable placeholder="请选择职位/岗位">
            <el-option v-for="p in posts" :key="p" :label="p" :value="p" />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <!-- 新增按钮 -->
    <el-row style="float: left; width: 100%; margin-left: 15px; margin-bottom: 15px;">
      <el-button style="margin-right: 15px;" type="primary" icon="el-icon-plus" @click="handelClickAdd">新增</el-button>
      <el-popover v-model="visible" placement="top" width="160">
        <p>确定删除选中的员工?</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="visible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="deleteUsers">确定</el-button>
        </div>
        <el-button slot="reference" style="margin-right: 15px;" type="primary" icon="el-icon-minus">删除</el-button>
      </el-popover>
      <el-button v-if="!isFull" type="primary" icon="el-icon-arrow-left" style="float: right; margin-right: 5%;" @click="fullTable">完整列表</el-button>
      <!-- <el-button type="text" style="color: gray;" icon="el-icon-upload2">导出</el-button>
      <span class="line" style="margin-left: 15px; margin-right: 15px; color: gray;" :span="2">|</span>
      <el-button type="text" style="color: gray;" icon="el-icon-download">导入</el-button>
      <span class="line" style="margin-left: 15px; margin-right: 15px; color: gray;" :span="2">|</span>
      <el-button type="text" style="color: gray;" icon="el-icon-s-open">字段筛选</el-button> -->
    </el-row>
    <!-- 新增表单 -->
    <el-dialog :title="isAdd ? '新增' : '编辑'" :visible.sync="dialogFormVisible">
      <el-form ref="addForm" :model="addForm" :rules="rules" style="width: 90%;">
        <el-form-item label="员工姓名" prop="name" :label-width="formLabelWidth">
          <el-input v-model="addForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" prop="gender" :label-width="formLabelWidth">
          <el-select v-model="addForm.gender" placeholder="请选择性别" style="width: 100%;">
            <el-option v-for="g in genders" :key="g" :label="g" :value="g" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone" :label-width="formLabelWidth">
          <el-input v-model="addForm.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="住址" prop="address" :label-width="formLabelWidth">
          <el-input v-model="addForm.address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="入职日期" prop="entryDate" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-form-item>
              <el-date-picker v-model="addForm.entryDate" style="width: 219%;" type="date" placeholder="选择时间" value-format="yyyy-MM-dd" />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="所属部门" prop="department" :label-width="formLabelWidth">
          <el-select v-model="addForm.department" filterable placeholder="请选择所属部门" style="width: 100%;">
            <el-option v-for="d in departments" :key="d" :label="d" :value="d" />
          </el-select>
        </el-form-item>
        <el-form-item label="职位/岗位" prop="post" :label-width="formLabelWidth">
          <el-select v-model="addForm.post" filterable placeholder="请选择职位/岗位" style="width: 100%;">
            <el-option v-for="p in posts" :key="p" :label="p" :value="p" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="isAdd" type="primary" @click="addUser">确 定</el-button>
        <el-button v-else type="primary" @click="editUser">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 列表 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="uid" label="员工ID" width="120" />
      <el-table-column prop="name" label="员工姓名" width="120" />
      <el-table-column prop="gender" label="性别" width="80" />
      <el-table-column label="入职日期" width="120">
        <template slot-scope="scope">{{ scope.row.entryDate }}</template>
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" width="120" />
      <el-table-column prop="address" label="住址" show-overflow-tooltip min-width="250" />
      <el-table-column prop="department" label="所属部门" width="120" />
      <el-table-column prop="post" label="职位/岗位" width="120" />
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClickEdit(scope.row)">编辑</el-button>
          <span style="margin-left: 15px;" />
          <el-button type="text" size="small" @click="deleteUser(scope.row.id)">删除</el-button>
          <!-- <el-dropdown>
            <span class="el-dropdown-link" style="font-size: x-small;">
              更多<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>修改权限</el-dropdown-item>
              <el-dropdown-item @click.native="deleteUser(scope.row.id)">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page.sync="page"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="totalCount"
        style="text-align: center; margin-top: 20px"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      pageSize: 6,
      totalCount: 0,
      isAdd: true,
      isOpen: false,
      visible: false,
      isFull: true,
      isSearch: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      selectForm: {
        uid: '',
        name: '',
        entryDate: '',
        gender: '',
        department: '',
        post: ''
      },
      addForm: {
        name: '',
        entryDate: '',
        gender: '',
        phone: '',
        address: '',
        department: '',
        post: ''
      },
      tableData: [],
      multipleSelection: [],
      departments: [
        '项目管理部',
        '设计部',
        '施工部',
        '安全管理部',
        '质量控制部',
        '采购部',
        '财务部',
        '人力资源部',
        '法务部',
        '环境管理部',
        '技术支持部',
        '设备管理部'
      ],
      posts: [
        '工地管理员',
        '工地工人'
      ],
      genders: [
        '男',
        '女'
      ],
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'change' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        entryDate: [
          { required: true, message: '请选择入职日期', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入住址', trigger: 'change' }
        ],
        department: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        post: [
          { required: true, message: '请选择职位/岗位', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    page() {
      if (this.isSearch) {
        this.submitForm()
      } else {
        this.getUserList()
      }
    }
  },
  mounted() {
    this.getUserList()
  },
  methods: {
    getUserList() {
      this.axios.post(`http://139.9.77.245:8081/employee/${this.page}/${this.pageSize}`, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.data.code === 0) {
          this.tableData = res.data.data.records
          this.totalCount = res.data.data.total
        }
      })
    },
    submitForm() {
      this.axios.post(`http://139.9.77.245:8081/employee/${this.page}/${this.pageSize}`, this.selectForm, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.data.code === 0) {
          this.tableData = res.data.data.records
          this.totalCount = res.data.data.total
          this.isFull = false
          this.isSearch = true
        }
      })
    },
    resetForm() {
      this.selectForm = {
        uid: '',
        name: '',
        entryDate: '',
        gender: '',
        department: '',
        post: ''
      }
    },
    change() {
      this.isOpen = !this.isOpen
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClickEdit(row) {
      this.isAdd = false
      this.addForm = JSON.parse(JSON.stringify(row))
      this.dialogFormVisible = true
    },
    handelClickAdd() {
      this.isAdd = true
      this.addForm = {
        name: '',
        entryDate: '',
        gender: '',
        phone: '',
        address: '',
        department: '',
        post: ''
      }
      this.dialogFormVisible = true
    },
    addUser() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.axios.post('http://139.9.77.245:8081/employee', this.addForm).then(res => {
            if (res.data.code === 0) {
              this.getUserList()
              this.$message.success('添加成功')
              this.dialogFormVisible = false
              this.addForm = {
                name: '',
                entryDate: '',
                gender: '',
                phone: '',
                address: '',
                department: '',
                post: ''
              }
            } else {
              this.$message.error('添加失败')
            }
          })
        } else {
          console.log('提交失败')
          return false
        }
      })
    },
    editUser() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.axios.put('http://139.9.77.245:8081/employee', this.addForm).then(res => {
            if (res.data.code === 0) {
              this.getUserList()
              this.$message.success('修改成功')
              this.dialogFormVisible = false
              this.addForm = {
                name: '',
                entryDate: '',
                gender: '',
                phone: '',
                address: '',
                department: '',
                post: ''
              }
            }
            if (res.data.code === 1) {
              this.$message.error('修改失败')
            }
          })
        } else {
          console.log('修改失败')
          return false
        }
      })
    },
    deleteUsers() {
      const ids = []
      this.multipleSelection.forEach(user => {
        ids.push(~~user.id)
      })
      this.axios.post('http://139.9.77.245:8081/employee/deleteBatch', ids).then(res => {
        if (res.data.code === 0) {
          this.getUserList()
          this.$message.success('删除成功')
        }
        if (res.data.code === 1) {
          this.$message.error('删除失败')
        }
      })
      this.visible = false
    },
    deleteUser(id) {
      this.$confirm('此操作将删除该员工相关信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.delete(`http://139.9.77.245:8081/employee/${id}`).then(res => {
          if (res.data.code === 0) {
            this.getUserList()
            this.$message.success('删除成功')
          }
          if (res.data.code === 1) {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    cancel() {
      this.dialogFormVisible = false
      this.addForm = {
        name: '',
        entryDate: '',
        gender: '',
        phone: '',
        address: '',
        department: '',
        post: ''
      }
    },
    fullTable() {
      this.page = 1
      this.resetForm(this.selectForm)
      this.getUserList()
      this.isFull = true
      this.isSearch = false
    }
  }
}

</script>

<style scoped>
.line {
  text-align: center;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
